<!--
 * @Author: ChunLai
 * @Date: 2022-10-25 11:18:14
 * @LastEditTime: 2025-11-19 11:39:27
 * @Description: 常见问题
 * @FilePath: \01.latest-short-insure\src\views\index\components\Questions.vue
-->
<template>
  <div class="ques_li">
    <div class="flex_ac li_tit" @click="isOpen = !isOpen">
      <div class="flex_ac">
        <img class="q_img" :src="`${imgUrlPath}/icons/q_ico.png`" alt="" />
        <span class="md2-txt md2-txt_q ftw5" v-html="item.que"></span>
      </div>
      <span
        :class="isOpen ? 'ms-row2-icon' : 'ms-row-icon'"
        style="margin-left: 10px"
      ></span>
      
    </div>
    <div class="ans_md ft12 ft_c6" v-if="isOpen">
      <span class="md2-txt md2-txt_a" v-html="item.asks"></span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'Questions',
  props: ['item'],
  data() {
    return {
      queList: [],
      isOpen: false,
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      questions: 'home/questions',
    }),
  },
  mounted() {},
  methods: {
    openMore(index) {},
  },
};
</script>

<style lang="less" scoped>
.md2-txt {
  width: calc(100% - 30px);
  line-height: 1.5;

  &.md2-txt_q {
    color: rgba(52, 52, 52, 1);
    font-size: 15px;
    flex: 1;
  }

  &.md2-txt_a {
    width: 100%;
    color: rgba(102, 102, 102, 1);
    line-height: 1.5;
    font-size: 14px;

    text-align: justify;
  }

  b {
    font-size: 14px !important;
  }
}

// .ques_li {
// margin-bottom: 2px;
// &:not(:last-child) {
//   border-bottom: 0.5px solid rgba(229, 229, 229, 1);
// }
// }

.li_tit {
  min-height: 36px;
  justify-content: space-between;

  .q_img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}

.md2-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-right: 10px;
}

.label-q {
  color: rgb(240, 90, 75);
  background: linear-gradient(
    90deg,
    rgba(240, 90, 75, 0.192) 0%,
    rgba(240, 90, 75, 0.192) 100%
  );
}

.label-a {
  color: #ffb52e;
  background: linear-gradient(
    90deg,
    rgba(255, 181, 46, 0.192157),
    rgba(254, 214, 71, 0.192157)
  );
}

.ans_md {
  display: flex;
}

.active {
  transform: rotate(90deg);
}
</style>
